<template>
  <ul>
    <!-- 用户头像模块 -->
    <div class="avatar" v-if="isLogined">
      <img :src="userAvatar" />
      <!-- 鼠标移动到头像后显示的内容 -->
      <div class="detail-content">
        <!-- 用户名 -->
        <p class="userName">{{ userName }}</p>
        <!-- 外部的功能盒子 -->
        <ul class="funciton-box">
          <!-- 线 -->
          <p class="line"></p>
          <!-- 个人功能模块 -->
          <li
            v-for="(item, index) in personFunctionModule"
            :key="index"
            @click="personFunction(item)"
          >
            <i :class="['iconfont ' + item.icon]"></i
            ><span>{{ item.text }}</span>
            <i class="iconfont icon-youjiantou1"></i>
          </li>
        </ul>
      </div>
    </div>
    <!-- 登录按钮 -->
    <li @click="jumpLogin()" class="login" v-else><span>登录</span></li>
    <!-- 路由导航模块 -->
    <li
      v-for="(obj, index) in menuData"
      :key="index"
      @click="jumpRoute(obj)"
      class="routeLead"
    >
      <span>{{ obj.text }}</span>
    </li>
    <!-- 搜索按钮 -->
    <!-- <slot name="search"></slot> -->
    <!-- 夜间切换模块 -->
    <slot name="modeToggle"></slot>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      // 菜单数据
      menuData: [
        { text: "首页", name: "home" },
        { text: "关于我们", name: "about" },
        { text: "资料下载", name: "download" },
        { text: "比赛详情", name: "detail" },
        { text: "文章编写", name: "articleEdit" },
      ],
      // 个人功能
      personFunctionModule: [
        { icon: "icon-user", text: "个人中心" },
        { icon: "icon-book", text: "投稿管理" },
        { icon: "icon-exit", text: "退出登录" },
      ],
      // 用户信息(放在localStorage中)
      // userInfo: "",
      // 判断用户是否已经登录，为true则表示登录了
      isLogined: "",
    };
  },
  computed: {
    // 用户头像
    userAvatar() {
      return this.userInfo.imgUrl || require("assets/img/topBar/avatar.png");
    },
    // 用户名
    userName() {
      return this.userInfo.nickName || "用户" + this.userInfo.phone;
    },
    // 用户信息
    userInfo() {
      return JSON.parse(sessionStorage.getItem("userInfoList")) || "";
    },
  },
  methods: {
    // 遍历所有li，给当前页面所对应的li设置颜色
    setColor() {
      this.menuData.forEach((obj, index) => {
        if (this.$route.name === obj.name) {
          const lis = document.querySelectorAll(".routeLead");
          // 所有li的颜色设置为黑色
          for (let i = 0; i < lis.length; i++) {
            lis[i].style.color = "";
          }
          // 当前li的颜色设置为橙色
          lis[index].style.color = "orange";
          // 给移动端才显示的菜单设置对应的li为橙色
          lis[index + lis.length / 2].style.color = "orange";
        }
      });
    },
    // 跳转路由
    jumpRoute(obj) {
      this.setColor();
      this.$router.push({ name: obj.name });
      // switch (obj.text) {
      //   case "首页":
      //     // 提示用户
      //     Message({
      //       showClose: true,
      //       message: "正在建设中，敬请期待！",
      //       type: "success",
      //     });
      //     // this.$router.push("/home");
      //     break;
      //   case "关于我们":
      //     // 跳转到about页面
      //     this.$router.push("/about");
      //     break;
      //   case "资料下载":
      //     // 提示用户
      //     Message({
      //       showClose: true,
      //       message: "正在建设中，敬请期待！",
      //       type: "success",
      //     });
      //     break;
      //   case "比赛详情":
      //     // 提示用户
      //     Message({
      //       showClose: true,
      //       message: "正在建设中，敬请期待！",
      //       type: "success",
      //     });
      //     break;
      // }
    },
    // 跳转到登录页面
    jumpLogin() {
      this.$router.push("/Login");
    },
    // 个人功能
    personFunction(item) {
      switch (item.text) {
        case "个人中心":
          this.$router.push("/account/personInfo");
          break;
        case "投稿管理":
          break;
        case "退出登录":
          sessionStorage.removeItem("userInfoList");
          sessionStorage.removeItem("session");
          this.$router.replace("/about");
          // 刷新页面
          this.$router.go(0);
          break;
      }
    },
  },
  mounted() {
    this.setColor();
    // 如果有用户信息，则用户已登录
    if (this.userInfo) {
      this.isLogined = true;
    }
  },
};
</script>

<style scoped lang="scss">
.routeLead span,
.login span {
  font-weight: 600;
}
</style>
